<template>
  <div class="dialog-wrapper">
    <Modal
      v-model="show"
      :title="title"
      footer-hide
      :mask-closable="false">
      <Form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="80">
        <FormItem label="图片" prop="imgUrl">
          <div class="priview" v-show="form.imgUrl">
            <img :src="form.imgUrl" alt="" class="priview-image">
          </div>
          <Upload
            ref="upload"
            :format="['jpg','jpeg','png']"
            accept="image/jpeg,image/png"
            action=""
            :show-upload-list="false"
            :before-upload="handleBeforeUpload"
            >
            <Button icon="ios-cloud-upload-outline">{{$t('m.scImg')}}</Button>
          </Upload>
        </FormItem>
        <FormItem label="标题"  prop="title">
          <Input v-model="form.title" type="text" placeholder="请输入标题" />
        </FormItem>
        <FormItem label="推送平台" prop="target">
          <Select placeholder="请选择推送平台" v-model="form.target">
            <Option value="all">全部</Option>
            <Option value="android">安卓</Option>
            <Option value="ios">苹果</Option>
            <Option value="h5">H5</Option>
          </Select>
        </FormItem>
        <FormItem label="展示顺序"  prop="sortNo">
          <Input v-model="form.sortNo" type="text" placeholder="请输入顺序" number />
        </FormItem>
        <FormItem label="状态"  prop="status">
          <RadioGroup v-model="form.status">
            <Radio :label="1">上架</Radio>
            <Radio :label="0">下架</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="链接" prop="linkUrl">
          <Input v-model="form.linkUrl" type="text" placeholder="请输入链接" />
        </FormItem>
        <FormItem label="内容">
          <Input type="textarea" placeholder="请输入内容" required v-model="form.content"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary"  @click="handleSubmit" :loading="btnLoading">提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import { deepCopy } from '@/libs/util';
  export default {
    name: 'modalOperator',
    props: {
      title: String,
      type: String,
      value: Boolean,
      data: {
        type: Object,
        default: {}
      }
    },
    data () {
      const validateNumber = (rule, value, callback) => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字'));
        } {
          callback();
        }
      }
      return {
        btnLoading: false,
        show: this.value,
        imgArr: '',
        form: {},
        rules: {
          imgUrl: [
            { required: true, message: '请上传图片', trigger: 'change' }
          ],
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          sortNo: [
            { type: 'number', required: true, message: '请输入数字', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
          ],
          status: [
            { required: true, type: 'number', message: '请选择上架状态', trigger: 'change' }
          ],
          target: [
            { required: true, message: '请选择推送平台', trigger: 'change' }
          ]
        }
      }
    },
    watch: {
      value(val) {
        this.show = val;
        if (val) this.form = deepCopy(this.data)
      },
      show(val) {
        this.$refs.form.resetFields();
        this.$emit('input', val);
      }
    },
    methods: {
      // 图片上传前的钩子函数
      handleBeforeUpload (file) {
        const reg = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
        if (!reg.test(file.type)) return this.$Message.error('只能上传jpg, jpeg, png格式的图片');
        
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          this.form.imgUrl = e.target.result;
        }

        reader.onerror = (e) => {
          this.$Message.error('图片转成base64错误');
        }

        return false;
      },
      // 表单提交
      handleSubmit () {
        const { form } = this.$refs;
        form.validate(valid => {
          if (valid) {
            this.btnLoading = true;
            let url = '/helsinki/admin/appNotice';
            if (this.type === 'update') { url = url + '/update'; }
            this.$http.post(url, {
              ...this.form
            }).then(({ data: { errcode, info, data } }) => {
              if (errcode == 0) {
                let message = this.type == 'add' ? '添加公告成功' : '编辑公告成功';
                this.$Message.success(message);
                this.$emit('ok');
              }
              this.btnLoading = false;
            }, error => {});
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .ivu-form .ivu-form-item-label {
    margin-bottom: 0;
  }

  .ivu-radio-wrapper {
    margin-bottom: 0;
  }

  .priview {
    margin-bottom: 10px;
    .priview-image {
      max-height: 60px;
    }
  }
</style>
